<template>
	<view class="root" @touchmove.stop.prevent="() => {}">
		<scroll-view :scroll-top="scrollTop" :scroll-into-view="scrollId" class="scrollView" @scroll="scroll" scroll-y="true"
			:style="{'height':rootHeight + 'px'}">
			<!-- 自定义的头部数据 -->
			<slot name="header"></slot>
			<!-- <view class="sortItemViewClass" v-for="(item,index) in indexList" :item="item" :key="index" :id="getId(item.date)"> -->
			<view class="sortItemViewClass">
				<view class="lineBox">
					<view class="lineHeadBox flexs" v-if="false">
						<!-- 头部可不传 -->
						<view class="lineHead">
							<view class="title" @click="$refs.YearMouth.open()">
								<text>{{item.date}}</text>
								<image :src="$img_path('/pagesMine/2.png')" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="lineBodyBox">
						<!-- <view class="lineBody" v-for="(item_son,childIndx) in item[propsKey.data]" :key="childIndx" @click="scrollToId(item.date)"> -->
						<view class="lineBody" v-for="(item_son,childIndx) in indexList" :key="childIndx">
							<!-- 自定义的内容数据 -->
							<view class="i-item">
								<view class="l-1">
									<text class="label">{{item_son.money}}</text>
									<view class="num" :style="{color:item_son.money=='收入'?'#0291FF':'#E72A2A'}">
										{{item_son.money}}
									</view>
								</view>
								<view class="l-2">
									<text class="time">{{item_son.createtime}}</text>
									<view class="num">
										余额 ￥ {{item_son.after}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 自定义的底部数据 -->
			<slot name="footer"></slot>
		</scroll-view>
		
		<dateYearMouth ref="YearMouth" :dateValue="dateValue" @change="selectDate"></dateYearMouth>
	</view>
</template>

<script>
	import props from './props.js'
	import dateYearMouth from '../popup-picker/date-year-mouth.vue'
	const info = uni.getSystemInfoSync();

	var that;

	export default {
		props,
		data() {
			return {
				rootHeight: 0,
				children: [], //a-z的数据
				scrollId:null,
				scrollTop: 0, // scrollView 位置
				currentIndex: -1, // 当前索引
				indexList: this.list||[], // 数据
				isTouch: false, // 右侧字母是否为手指滑动期间，滑动期间不处理滚动事件
				isScroll: false,
				indexBoxInfo: {
					height: 0, // 高度
					childHeight: 0, // 单个子节点高度,
					top: 0, //距离顶部的高度 ， 手指移入实践是从最顶部开始计算的
					moveBoxHeight: 0, // 移动盒子的高度
				},
				isShowIndexBox: false,
				indexBoxTop: 40,
				oldScrollTop: 0,
				newScrollTop: 0,
				timer: null,
				mouseTimer: null,
				
				// 选择时间
				dateValue:'2024-05'
			}
		},
		components: {
			dateYearMouth
		},
		computed: {
			moveBoxStyles() {
				let {
					childHeight,
					top,
					moveBoxHeight
				} = this.indexBoxInfo

				let calcTop = (childHeight * (this.currentIndex + 1)) - (moveBoxHeight / 2) + top;
				if (info.platform != 'ios' || info.platform != 'android') {
					calcTop += info.windowTop;
				}
				let style = {
					top: calcTop + 'px',
					...this.moveBoxStyle
				}
				return style
			}
		},
		methods: {
			getId(date){
				return 'item_'+this.$dayjs(date).format('YYYYMM')
			},
			scrollToId(date){
				this.scrollId = 'item_'+this.$dayjs(date).format('YYYYMM')
			},
			
			selectDate(val){
				console.log(val,'--')
				this.scrollToId(val)
			},
			

			touchElements(e) {
				if (this.isScroll) {
					return;
				}
				this.isTouch = true
				this.goIndexView(Math.floor((e - this.indexBoxInfo.top) / this.indexBoxInfo.childHeight))
			},

			touchmove(e) {
				if (this.isScroll) {
					return;
				}
				this.touchElements(e.changedTouches[0].pageY)
			},

			goIndexView(index) {
				if (index == this.currentIndex) return
				index = index > this.indexList.length - 1 ? this.indexList.length - 1 : index
				index = index < 0 ? 0 : index
				this.currentIndex = index
				let height = this.headerHeight;
				for (let i = 0; i < this.children.length; i++) {
					let item = this.children[i]
					if (i <= index - 1) {
						height += item.height
					}
				}
				if (this.currentIndex == 0 && this.headerHeight == 0) {
					this.$nextTick(function() {
						if (this.scrollTop == 0) {
							this.scrollTop = 0.1;
						} else {
							this.scrollTop = 0;
						}
					});
				} else {
					this.$nextTick(function() {
						if (this.scrollTop == height) {
							this.scrollTop = height + 0.1
						} else {
							this.scrollTop = height;
						}
					});
				}
			},
			//页面滚动事件
			scroll(e) {
				
				this.scrollId = null
				this.newScrollTop = e.detail.scrollTop;
				if (this.isTouch) return;
				let height = this.headerHeight;
				if (e.detail.scrollTop < height) {
					this.currentIndex = -1;
					return
				}
				let indexs = 0
				this.children.map((item, index) => {
					height += item.height
					if (e.detail.scrollTop >= height) {
						indexs = index + 1
					}
				})
				this.currentIndex = indexs
			},
			//核心计算字母滚动高度的代码
			getChildrenData() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this); //这样写就只会选择本页面组件的类名box的
					query.selectAll('.sortItemViewClass').boundingClientRect(
						data => { //回调函数，data中存储的是这些元素节点（每个节点的信息存为一个对象）的位置信息
							let childData = Array(JSON.stringify(data));
							for (let i = 0; i < childData.length; i++) {
								let child = childData[i];
							}
							this.children = JSON.parse(childData);
						}).exec();

					setTimeout(async () => {
						let indexBoxDomInfo = await this.getDomInfo('.indexBox')
						let moveBoxInfo = await this.getDomInfo('.moveBox')
						indexBoxDomInfo.moveBoxHeight = moveBoxInfo.height
						indexBoxDomInfo.childHeight = indexBoxDomInfo.height / this.indexList.length
						this.indexBoxInfo = indexBoxDomInfo
						this.isShowIndexBox = true;
					})
				})
			},
			getDomInfo(selector, all) {
				// 可一次查多个元素selectAll
				return new Promise((resolve) => {
					uni.createSelectorQuery()
						.in(this)[all ? 'selectAll' : 'select'](selector)
						.boundingClientRect((rect) => {
							if (all && Array.isArray(rect) && rect.length) {
								resolve(rect)
							}
							if (!all && rect) {
								resolve(rect)
							}
						})
						.exec()
				})
			},
		},
		created() {
			that = this;
			console.log(info)
			this.timer = setInterval(function() {
				if (that.oldScrollTop != that.newScrollTop) {
					that.oldScrollTop = that.newScrollTop;
					that.isScroll = true;
				} else {
					that.isScroll = false;
				}
			}, 50);
			this.rootHeight = info.windowHeight - info.safeAreaInsets.bottom - uni.upx2px(348);
		},
		mounted() {
			this.getChildrenData();
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		watch: {
			list(newValue, oldValue) {
				this.getChildrenData();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.root {
		position: relative;
	}

	.sortItemViewClass {
		background-color: #fff;
		.lineBox {
			width: 100%;
			.lineBodyBox{
				.lineBody{
					padding: 0 22rpx;
					box-sizing: border-box;
					.i-item {
						padding: 30rpx 0;
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
					
						.l-1 {
							display: flex;
							align-items: center;
							justify-content: space-between;
					
							.label {
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
								line-height: 44rpx;
							}
					
							.num {
								font-weight: bold;
								font-size: 32rpx;
								line-height: 44rpx;
							}
						}
					
						.l-2 {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 20rpx;
					
							text {
								font-weight: bold;
								font-size: 28rpx;
								color: #999999;
								line-height: 40rpx;
							}
						}
					}
				}
			}
		}
		
		.lineHeadBox {
			position: sticky;
			top: 0;
			z-index: 99;
			// padding: 10rpx;
			background: #F8F8F8;
		
			.lineHead {
				.title {
					display: flex;
					align-items: center;
					padding: 22rpx;
					box-sizing: border-box;
					text{
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						line-height: 44rpx;
					}
					&>image {
						width: 34rpx;
						height: 18rpx;
						// transition: all .3s;
						margin-left: 12rpx;
					}
				}
			}
		}
	}

	.scrollView {
		height: 100%;
		background-color: #fff;
		overflow: auto;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.moveBox {
		z-index: 9999;
		width: 100rpx;
		height: 100rpx;
		background: #eeeeee;
		position: fixed;
		right: 60px;
		top: 0;
		transform: rotate(-45deg);
		border-radius: 100px 100px 0 100px;
		transition: all 0.2s;
		opacity: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.text {
			transform: rotate(45deg);
			font-size: 30rpx;
		}
	}

	.noShow {}

	.show {
		opacity: 1;
	}

	.letterListView {
		z-index: 999;
		width: 60rpx;
		display: flex;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translate(0, -50%);
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.indexBox {
			display: flex;
			flex-direction: column;
			width: 60rpx;
			height: 100%;
			align-items: center;
			justify-content: center;

			.index {
				margin-left: 10rpx;
				width: 60rpx;
				height: 35rpx;
				display: flex;
				align-items: center;
				border-radius: 50%;
				justify-content: center;

				.norTextClass {
					font-size: 20rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: bold;
					color: #8590A6;
				}

				.indexTextSel {
					color: #3164F6;
				}
			}
		}
	}
</style>